<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<script>
		var cond = "none";
		var x, y;
		function over(e, i) {
			if (cond == "none") {
				cond = "way";
				setTimeout(
					function() {
						(function(i) {
							var s = document.getElementsByTagName("svg")[0];
							s.style.left=x+"px";
							s.style.top=y+"px";

							b = document.getElementById("dispCircle");
							b.firstChild.nodeValue = [b.firstChild.nodeValue, i].join("-");
							cond = "none";
						})(i);
					},
					100);
			} else if (cond == "way") {
				x = e.clientX;
				y = e.clientY;
				x -= 100;
				y -= 100;
			}
		}

		function context(e) {
			if(e.button!=2) return;
			var s = document.getElementsByTagName("svg")[0];
			s.style.display = "block";

			var x = e.clientX;
			var y = e.clientY;
			x -= 100;
			y -= 100;
			var s = document.getElementsByTagName("svg")[0];
			s.style.left=x+"px";
			s.style.top=y+"px";
			return false;
		}
		function uped(e) {
			var b = document.getElementById("dispCircle");
			b.firstChild.nodeValue = "0";

			var s = document.getElementsByTagName("svg")[0];
			s.style.display = "none";
		}
	</script>
	<style>
		path {
			stroke	: black;
		}
		circle {
			stroke	: black;
		}
		.front {
			fill	: white;
			opacity	: 0.1;
		}
		.back {
			fill	: white;
		}
		text {
			font-size	: 10pt;
			text-align	: center;
		}
	</style>
    <body onmousedown="context(event);return false;" onmouseup="uped(event);return false;">
	<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" style="border:1px solid black;position:absolute;">
		<text x=" 95" y=" 45">1</text>
		<text x="137" y=" 63">2</text>
		<text x="150" y="105">3</text>
		<text x="137" y="147">4</text>
		<text x=" 95" y="160">5</text>
		<text x=" 53" y="147">6</text>
		<text x=" 40" y="105">7</text>
		<text x=" 53" y=" 63">8</text>

		<path d="M 100 100 L  62   8 A 100 100 0 0 1 138   8 L 100 100 Z" class="front" onmousemove="over(evt, 1);" />
		<path d="M 100 100 L 138   8 A 100 100 0 0 1 192  62 L 100 100 Z" class="front" onmousemove="over(evt, 2);" />
		<path d="M 100 100 L 192  62 A 100 100 0 0 1 192 138 L 100 100 Z" class="front" onmousemove="over(evt, 3);" />
		<path d="M 100 100 L 192 138 A 100 100 0 0 1 138 192 L 100 100 Z" class="front" onmousemove="over(evt, 4);"/>
		<path d="M 100 100 L 138 192 A 100 100 0 0 1  62 192 L 100 100 Z" class="front" onmousemove="over(evt, 5);"/>
		<path d="M 100 100 L  62 192 A 100 100 0 0 1   8 138 L 100 100 Z" class="front" onmousemove="over(evt, 6);"/>
		<path d="M 100 100 L   8 138 A 100 100 0 0 1   8  62 L 100 100 Z" class="front" onmousemove="over(evt, 7);"/>
		<path d="M 100 100 L   8  62 A 100 100 0 0 1  62   8 L 100 100 Z" class="front" onmousemove="over(evt, 8);"/>

		<circle cx="100" cy="100" r="40" class="back" />
		<text id="dispCircle" x="68" y="105" width="66">0</text>
		<circle cx="100" cy="100" r="40" class="front" />
	</svg>
    </body>
</html>
